Overview

During accessibility testing (ACC-271), focus indicator issues were identified in the Calendar/DatePicker component:

1. Header buttons focus color incorrect — The month/year buttons in the calendar header were using --sapSelectedColor (selection blue) for focus indicator instead of --sapContent_FocusColor (focus blue), making it appear as if the element was selected rather than focused.

What We Did

• Changed focus outline color from --sapSelectedColor to --sapContent_FocusColor
• Updated DayPicker focus-related variables to use the correct ones as well

What This Fixes

• ✅ WCAG 2.2 2.4.7 (Focus Visible) — Focus indicator now uses correct focus color, clearly distinguishing focus from selection
• ✅ Header buttons — Month/year buttons show proper focus blue outline instead of selection blue
• ✅ Selected date focus — Focus on selected dates in day picker now uses correct focus color

Before

After